<template>
	<view v-if="selectedSkuProm && showPromotion">
        <view class="promotion-view" @click="showPopup = true">
            <view>
                <text class="bold-text">促销</text>
            </view>
            <view class="content-view u-flex-wrap u-margin-left-20 u-margin-right-20 u-line-2">
                <view class="promotion-info-view u-line-2" v-for="(prom, index) in selectedSkuProm" :key="index">
                    <view v-if="prom.full_discount_vo" class="prom-content">
                        <view class="u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_full_minus && prom.full_discount_vo.is_full_minus === 1">
                            <u-tag text="满减" type="error" mode="plain" shape="circle" />
                        </view>
                        <view class="u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_discount && prom.full_discount_vo.is_discount === 1">
                            <u-tag text="打折" type="error" mode="plain" shape="circle" />
                        </view>
                        <view class="u-flex u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_send_gift">
                            <u-tag text="赠礼" type="error" mode="plain" shape="circle" />
                        </view>
                        <view class="u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_send_bonus">
                            <u-tag text="赠券" type="error" mode="plain" shape="circle" />
                        </view>
                        <view class="u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_free_ship">
                            <u-tag text="免邮" type="error" mode="plain" shape="circle" />
                        </view>
                        <view class="u-m-t-10 u-m-r-10" v-if="prom.full_discount_vo.is_send_point">
                            <u-tag text="积分" type="error" mode="plain" shape="circle" />
                        </view>
                    </view>
                    <view class="u-m-t-10 u-m-r-10" v-if="prom.minus_vo">
                        <u-tag text="单品立减" type="error" mode="plain" shape="circle" />
                    </view>
                    <view class="u-m-t-10 u-m-r-10" v-if="prom.half_price_vo">
                        <u-tag text="第二件半价" type="error" mode="plain" shape="circle" />
                    </view>

                </view>
            </view>
            <view>
                <u-icon class="collection-icon u-margin-right-10" name="more-dot-fill" size="36"></u-icon>
            </view>
        </view>
        <!-- 促销弹出层 -->
        <u-popup v-model="showPopup" mode="bottom" length="70%" border-radius="20" :safe-area-inset-bottom="true" closeable close-icon-size="20">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                促销
            </view>
            <view class="promotion-list-view u-m-l-40 u-m-r-40 u-line-1">
               <view class="promotion-info-view u-line-1" v-for="(prom, index) in selectedSkuProm" :key="index">
                   <view v-if="prom.full_discount_vo">
                       <view class="u-m-b-20" v-if="prom.full_discount_vo.is_full_minus && prom.full_discount_vo.is_full_minus === 1">
                           <u-tag text="满减" type="error" mode="plain" shape="circle" />
                           <text class="u-margin-left-15">满{{ prom.full_discount_vo.full_money }}元，立减现金{{prom.full_discount_vo.minus_value}}元</text>
                       </view>
                       <view class="u-m-b-20" v-if="prom.full_discount_vo.is_discount && prom.full_discount_vo.is_discount === 1">
                           <u-tag text="打折" type="error" mode="plain" shape="circle" />
                           <text class="u-margin-left-15">满{{ prom.full_discount_vo.full_money }}元，立享{{prom.full_discount_vo.discount_value}}折优惠</text>
                       </view>
                       <view class="u-m-b-20 u-flex" v-if="prom.full_discount_vo.is_send_gift">
                           <u-tag text="赠礼" type="error" mode="plain" shape="circle" />
                           <view class="u-margin-left-15 u-flex">赠送价值{{ prom.full_discount_vo.full_discount_gift_do.gift_price }}元的
                               <u-image width="50" height="50" :src="prom.full_discount_vo.full_discount_gift_do.gift_img"></u-image>
                           </view>
                       </view>
                       <view class="u-m-b-20" v-if="prom.full_discount_vo.is_send_bonus">
                           <u-tag text="赠券" type="error" mode="plain" shape="circle" />
                           <text class="u-margin-left-15">赠送{{ prom.full_discount_vo.coupon_do.coupon_price }}元的优惠券</text>
                       </view>
                       <view class="u-m-b-20" v-if="prom.full_discount_vo.is_free_ship">
                           <u-tag text="免邮" type="error" mode="plain" shape="circle" />
                           <text class="u-margin-left-15">满{{ prom.full_discount_vo.full_money }}元免邮费</text>
                       </view>
                       <view class="u-m-b-20" v-if="prom.full_discount_vo.is_send_point">
                           <u-tag text="积分" type="error" mode="plain" shape="circle" />
                           <text class="u-margin-left-15">赠送{{ prom.full_discount_vo.point_value }}积分</text>
                       </view>
                   </view>
                   <view class="u-m-b-20" v-if="prom.minus_vo">
                       <u-tag text="单品立减" type="error" mode="plain" shape="circle" />
                       <text class="u-margin-left-15">单件立减现金{{ prom.minus_vo.single_reduction_value }}元</text>
                   </view>
                   <view class="u-m-b-20" v-if="prom.half_price_vo">
                       <u-tag text="第二件半价" type="error" mode="plain" shape="circle" />
                       <text class="u-margin-left-15">第二件半价优惠</text>
                   </view>
               </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
    /**
     * 商品详情页促销组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * promotions  促销活动
     * selectedSku 商品规格
     */
    import * as API_Promotions from '@/api/promotions.js'
    export default {
        data() {
            return {
                selectedSkuProm: [],
                showPromotion: false,
                showPopup: false
            };
        },
        props: {
            promotions: {
                type: Array,
                default() {
                    return []
                }
            },
            selectedSku: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        watch: {
            selectedSku(val) {
                let i = 0
                function next() {
                    if (!this.promotions || !this.promotions.length) {
                        if (i++ > 5) {
                            return
                        }
                        setTimeout(_ => next.call(this), 500)
                        return
                    }
                    setTimeout(() => {
                        if(!this.promotions || !this.promotions.length) return
                        this.selectedSkuProm = []
                        this.showPromotion = false
                        /** 全部商品参与促销活动 */
                        const _promotions = this.promotions.filter(key => !key.sku_id)
                        /** 部分商品参与促销活动 */
                        const sku_promotions = this.promotions.filter(key => key.sku_id === val.sku_id)
                        if (_promotions && _promotions.length) {
                            if (_promotions.some(key => key.promotion_type ===  'FULL_DISCOUNT' || key.promotion_type === 'MINUS' || key.promotion_type === 'HALF_PRICE')) {
                                this.showPromotion = true
                                this.selectedSkuProm.push(..._promotions)
                            } else {
                                this.showPromotion = false
                            }
                        }
                        if (sku_promotions && sku_promotions.length) {
                            sku_promotions.forEach(key => {
                                if (key.promotion_type ===  'FULL_DISCOUNT' || key.promotion_type === 'MINUS' || key.promotion_type === 'HALF_PRICE') {
                                    this.showPromotion = true
                                    this.selectedSkuProm.push(key)
                                }
                            })
                        }
                    },500)
                }
                next.call(this)
            }
        }
	}
</script>

<style lang="scss" scoped>
    .promotion-view {
        padding: 30rpx;
        display: flex;
        align-items: center;
        padding-bottom: 20rpx;
        background-color: #FFFFFF;
        .prom-content {
            display: flex;
        }
        .left-view {
            margin-right: 20rpx;
        }
        .bold-text {
            font-weight: bold;
        }
        .content-view {
            display: flex;
            flex: 1;
        }
    }
</style>
